<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扑克牌开牌效果展示</title>
    <style>
        @keyframes imgMove{
            from{transform:rotateZ(0)}
            to{transform: rotateZ(360deg);}
        }
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            background-color: bisque;
            perspective: 1000px;
        }
        .box{
            width:50px;
            height: 130px;
            position: absolute;
            top: 0; bottom: 0; left: 0; right: 0; margin: auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateZ(30deg);
        }
        img{
            width: 85px;
            height: 130px;
            transform-origin: left bottom 0;
            position: absolute;
        }
        .box:hover :nth-child(53) { animation: imgMove 11s 0ms;}
        .box:hover :nth-child(52) { animation: imgMove 11s 100ms;}
        .box:hover :nth-child(51) { animation: imgMove 11s 200ms;}
        .box:hover :nth-child(50) { animation: imgMove 11s 300ms;}
        .box:hover :nth-child(49) { animation: imgMove 11s 400ms;}
        .box:hover :nth-child(48) { animation: imgMove 11s 500ms;}
        .box:hover :nth-child(47) { animation: imgMove 11s 600ms;}
        .box:hover :nth-child(46) { animation: imgMove 11s 700ms;}
        .box:hover :nth-child(45) { animation: imgMove 11s 800ms;}
        .box:hover :nth-child(44) { animation: imgMove 11s 900ms;}
        .box:hover :nth-child(43) { animation: imgMove 11s 1000ms;}
        .box:hover :nth-child(42) { animation: imgMove 11s 1100ms;}
        .box:hover :nth-child(41) { animation: imgMove 11s 1200ms;}
        .box:hover :nth-child(40) { animation: imgMove 11s 1300ms;}
        .box:hover :nth-child(39) { animation: imgMove 11s 1400ms;}
        .box:hover :nth-child(38) { animation: imgMove 11s 1500ms;}
        .box:hover :nth-child(37) { animation: imgMove 11s 1600ms;}
        .box:hover :nth-child(36) { animation: imgMove 11s 1700ms;}
        .box:hover :nth-child(35) { animation: imgMove 11s 1800ms;}
        .box:hover :nth-child(34) { animation: imgMove 11s 1900ms;}
        .box:hover :nth-child(33) { animation: imgMove 11s 2000ms;}
        .box:hover :nth-child(32) { animation: imgMove 11s 2100ms;}
        .box:hover :nth-child(31) { animation: imgMove 11s 2200ms;}
        .box:hover :nth-child(30) { animation: imgMove 11s 2300ms;}
        .box:hover :nth-child(29) { animation: imgMove 11s 2400ms;}
        .box:hover :nth-child(28) { animation: imgMove 11s 2500ms;}
        .box:hover :nth-child(27) { animation: imgMove 11s 2600ms;}
        .box:hover :nth-child(26) { animation: imgMove 11s 2700ms;}
        .box:hover :nth-child(25) { animation: imgMove 11s 2800ms;}
        .box:hover :nth-child(24) { animation: imgMove 11s 2900ms;}
        .box:hover :nth-child(23) { animation: imgMove 11s 3000ms;}
        .box:hover :nth-child(22) { animation: imgMove 11s 3100ms;}
        .box:hover :nth-child(21) { animation: imgMove 11s 3200ms;}
        .box:hover :nth-child(20) { animation: imgMove 11s 3300ms;}
        .box:hover :nth-child(19) { animation: imgMove 11s 3400ms;}
        .box:hover :nth-child(18) { animation: imgMove 11s 3500ms;}
        .box:hover :nth-child(17) { animation: imgMove 11s 3600ms;}
        .box:hover :nth-child(16) { animation: imgMove 11s 3700ms;}
        .box:hover :nth-child(15) { animation: imgMove 11s 3800ms;}
        .box:hover :nth-child(14) { animation: imgMove 11s 3900ms;}
        .box:hover :nth-child(13) { animation: imgMove 11s 4000ms;}
        .box:hover :nth-child(12) { animation: imgMove 11s 4100ms;}
        .box:hover :nth-child(11) { animation: imgMove 11s 4200ms;}
        .box:hover :nth-child(10) { animation: imgMove 11s 4300ms;}
        .box:hover :nth-child(9) { animation: imgMove 11s 4400ms;}
        .box:hover :nth-child(8) { animation: imgMove 11s 4500ms;}
        .box:hover :nth-child(7) { animation: imgMove 11s 4600ms;}
        .box:hover :nth-child(6) { animation: imgMove 11s 4700ms;}
        .box:hover :nth-child(5) { animation: imgMove 11s 4800ms;}
        .box:hover :nth-child(4) { animation: imgMove 11s 4900ms;}
        .box:hover :nth-child(3) { animation: imgMove 11s 5000ms;}
        .box:hover :nth-child(2) { animation: imgMove 11s 5100ms;}
        .box:hover :nth-child(1) { animation: imgMove 11s 5200ms;}
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/image1.jpg" alt=""><img src="./images/image2.jpg" alt=""><img src="./images/image3.jpg" alt=""><img src="./images/image4.jpg" alt=""><img src="./images/image5.jpg" alt=""><img src="./images/image6.jpg" alt=""><img src="./images/image7.jpg" alt=""><img src="./images/image8.jpg" alt=""><img src="./images/image9.jpg" alt=""><img src="./images/image10.jpg" alt=""><img src="./images/image11.jpg" alt=""><img src="./images/image12.jpg" alt=""><img src="./images/image13.jpg" alt=""><img src="./images/image14.jpg" alt=""><img src="./images/image15.jpg" alt=""><img src="./images/image16.jpg" alt=""><img src="./images/image17.jpg" alt=""><img src="./images/image18.jpg" alt=""><img src="./images/image19.jpg" alt=""><img src="./images/image20.jpg" alt=""><img src="./images/image21.jpg" alt=""><img src="./images/image22.jpg" alt=""><img src="./images/image23.jpg" alt=""><img src="./images/image24.jpg" alt=""><img src="./images/image25.jpg" alt=""><img src="./images/image26.jpg" alt=""><img src="./images/image27.jpg" alt=""><img src="./images/image28.jpg" alt=""><img src="./images/image29.jpg" alt=""><img src="./images/image30.jpg" alt=""><img src="./images/image31.jpg" alt=""><img src="./images/image32.jpg" alt=""><img src="./images/image33.jpg" alt=""><img src="./images/image34.jpg" alt=""><img src="./images/image35.jpg" alt=""><img src="./images/image36.jpg" alt=""><img src="./images/image37.jpg" alt=""><img src="./images/image38.jpg" alt=""><img src="./images/image39.jpg" alt=""><img src="./images/image40.jpg" alt=""><img src="./images/image41.jpg" alt=""><img src="./images/image42.jpg" alt=""><img src="./images/image43.jpg" alt=""><img src="./images/image44.jpg" alt=""><img src="./images/image45.jpg" alt=""><img src="./images/image46.jpg" alt=""><img src="./images/image47.jpg" alt=""><img src="./images/image48.jpg" alt=""><img src="./images/image49.jpg" alt=""><img src="./images/image50.jpg" alt=""><img src="./images/image51.jpg" alt=""><img src="./images/image52.jpg" alt=""><img src="./images/image53.jpg" alt="">
    </div>
</body>
</html>